iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
0
自我挑戰組

JavaScript 新手筆記系列 第 25

Day25 - 資料儲存與更新(02)

  • 分享至 

  • xImage
  •  

前言

利用自訂 data 屬性以及 array 來動態增加資料

data 屬性

  • HTML 可自訂 data- 屬性,開頭以 data- 開始,後面名稱可自行定義,如 data-nom
  • 在 JS 上利用 dataset.名稱 來搜尋值

index.html

<body>
    <div>
        <ul class="list">
            <li data-num="1" class="listli"></li>
        </ul>
    </div>
    <script src="JS/test.js"></script>
</body>

test.js

var ele = document.querySelector(".listli");

ele.addEventListener('click',function(e){
    console.log(e.target.dataset.num);
});
// 點擊網頁上的 li 後顯示 1

array

  • 在每個事件都增加監聽比較耗資源,因此會在父元件上增加,搭配可以自行定義的 data- ,以及利用 array 和迴圈來動態增加資料
  • 刪減 array 內的資料則使用 splice(var1 , var2),代表從第 var1 個開始,刪除 var2
  • 從下面例子可以發現 HTML 內容只有一個 ul ,沒有 li ,主要就是靠 JS 的部分來動態新增甚至刪除

index.html

<body>
    <div>
        <ul class="list">
        </ul>
    </div>
    <script src="JS/test.js"></script>
</body>

test.js

var data = [
    {
    Site: "崙背",
    county: "雲林縣",
    PM25: "51",
    },
    {
    Site: "富貴角",
    county: "新北市",
    PM25: "7",
    },
    {
    Site: "麥寮",
    county: "雲林縣",
    PM25: "30",
    }
]

var list = document.querySelector('.list');

// 更新 data
function updateList(){
var str = '';
var len = data.length;
for(var i = 0 ; i<len ; i++){
    str+='<li data-num="'+i+'">'+'<a href="#"> x </a>'+data[i].county+'的'+data[i].Site+'</li>'
}
// 為了在網頁顯示
// <li data-num="i"><a href="#"> x </a> 第 i county 的 Site </li>
// str+= 是因為要累加,以此例來說有3筆,因此最終會在父元件 ul 下新增 3筆 li 
list.innerHTML = str;
}

updateList();
// 將物件內的資料更新至列表
  • 更新後顯示如下
// 確認點擊後顯示PM2.5值
function checkList(e){
var num = e.target.dataset.num;
console.log(e.target.nodeName);
if(e.target.nodeName !== 'LI'){return};
// 若點到 li 連結才繼續執行
alert('你點擊所在位置的PM2.5為'+data[num].PM25)
// 彈跳視窗顯示 PM2.5值
};

list.addEventListener('click',checkList,false);
  • 點擊會跳出視窗
// 如果點擊 a 連結,則將資料刪除
function delList(e){
var num = e.target.dataset.num;
if(e.target.nodeName !== 'A'){return};
// 若點到 a 連結才繼續執行
data.splice(num,1);
updateList();
// 刪除後並更新列表
}
list.addEventListener('click',delList,false);
  • 點擊 x 後會刪除資料

  • 上面的例子沒利用資料儲存,如果搭配儲存和這次的 data- 還有 array 與迴圈的功能,基本上可以做出一個 todo list 出來,後續有機會再進行實作補充

次回

進行 BOM ,沒想到真的快看完影片了


上一篇
Day24 - 資料儲存與更新(01)
下一篇
Day26 - BOM
系列文
JavaScript 新手筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言